<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系客服 - 人才职业生涯规划平台</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        :root {
            --contact-bg-color: #f8f9fa;
            --contact-card-bg: #ffffff;
            --contact-text-primary: #212529;
            --contact-text-secondary: #6c757d;
            --contact-border-color: #dee2e6;
            --contact-soft-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
            --contact-radius-lg: 16px;
            --contact-radius-md: 12px;
            --contact-radius-sm: 8px;
            --contact-primary-color: #4a6fee;
            --contact-success-color: #28a745;
        }
        
        body {
            background-color: var(--contact-bg-color);
        }
        
        .app-container {
            max-width: var(--content-max-width, 450px);
            background-color: var(--contact-bg-color);
            box-shadow: none;
        }
        
        /* 头部样式 */
        .contact-header {
            position: fixed;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: var(--content-max-width, 450px);
            background-color: white;
            display: flex;
            align-items: center;
            padding: 15px;
            z-index: 100;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
        
        .back-btn {
            background: none;
            border: none;
            font-size: 22px;
            color: var(--contact-text-primary);
            cursor: pointer;
            padding: 0;
            margin-right: 15px;
        }
        
        .contact-title {
            font-size: 18px;
            font-weight: 600;
            margin: 0;
        }
        
        /* 内容区域样式 */
        .contact-content {
            padding: 15px;
            margin-top: 60px;
            padding-bottom: 70px; /* 为底部导航栏预留空间 */
        }
        
        .contact-card {
            background-color: var(--contact-card-bg);
            border-radius: var(--contact-radius-md);
            box-shadow: var(--contact-soft-shadow);
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .contact-intro {
            color: var(--contact-text-secondary);
            font-size: 14px;
            margin: 0 0 20px;
            line-height: 1.5;
        }
        
        /* 联系方式列表 */
        .contact-methods {
            margin-bottom: 30px;
        }
        
        .contact-method {
            display: flex;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid var(--contact-border-color);
        }
        
        .contact-method:last-child {
            border-bottom: none;
        }
        
        .contact-icon-wrapper {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: rgba(74, 111, 238, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            flex-shrink: 0;
        }
        
        .contact-icon {
            color: var(--contact-primary-color);
            font-size: 24px;
        }
        
        .contact-details {
            flex-grow: 1;
        }
        
        .contact-name {
            font-size: 16px;
            font-weight: 500;
            color: var(--contact-text-primary);
            margin: 0 0 4px;
        }
        
        .contact-value {
            font-size: 14px;
            color: var(--contact-text-secondary);
            margin: 0;
        }
        
        .contact-value.highlight {
            color: var(--contact-primary-color);
            font-weight: 500;
        }
        
        .contact-action {
            background-color: var(--contact-primary-color);
            color: white;
            border: none;
            border-radius: var(--contact-radius-sm);
            padding: 8px 15px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-left: 10px;
            flex-shrink: 0;
        }
        
        .contact-action:hover {
            background-color: #3a5bd9;
        }
        
        /* 常见问题样式 */
        .faq-section {
            margin-top: 30px;
        }
        
        .faq-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--contact-text-primary);
            margin: 0 0 15px;
        }
        
        .faq-item {
            background-color: white;
            border-radius: var(--contact-radius-sm);
            border: 1px solid var(--contact-border-color);
            margin-bottom: 10px;
            overflow: hidden;
        }
        
        .faq-question {
            padding: 15px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s ease;
        }
        
        .faq-question:hover {
            background-color: #f8f9fa;
        }
        
        .faq-question h3 {
            font-size: 15px;
            font-weight: 500;
            margin: 0;
            color: var(--contact-text-primary);
        }
        
        .faq-toggle {
            font-size: 18px;
            color: var(--contact-text-secondary);
            transition: transform 0.3s ease;
        }
        
        .faq-answer {
            padding: 0 15px;
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease;
            background-color: #f8f9fa;
            color: var(--contact-text-secondary);
            font-size: 14px;
            line-height: 1.5;
        }
        
        .faq-item.active .faq-question {
            background-color: #f0f6ff;
        }
        
        .faq-item.active .faq-toggle {
            transform: rotate(180deg);
            color: var(--contact-primary-color);
        }
        
        .faq-item.active .faq-answer {
            padding: 15px;
            max-height: 200px;
            border-top: 1px solid #eaeaea;
        }
        
        /* QR码区域 */
        .qr-section {
            text-align: center;
            padding: 20px 15px;
            margin-top: 20px;
        }
        
        .qr-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--contact-text-primary);
            margin: 0 0 15px;
        }
        
        .qr-image {
            width: 160px;
            height: 160px;
            margin: 0 auto 10px;
            padding: 10px;
            background-color: white;
            border-radius: var(--contact-radius-sm);
            box-shadow: var(--contact-soft-shadow);
        }
        
        .qr-tip {
            font-size: 13px;
            color: var(--contact-text-secondary);
            margin: 10px 0 0;
        }
        
        /* 底部导航栏样式 */
        .tab-bar {
            height: 50px; 
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 450px;
            z-index: 1000;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: #fff;
            border-top: 1px solid #eee;
            box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.05);
            opacity: 1;
            transition: all 0.3s ease;
            padding-bottom: env(safe-area-inset-bottom, 0); 
        }
        
        .tab-bar .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;
            height: 100%;
            color: #8e8e93;
            font-size: 10px;
            position: relative;
            text-decoration: none;
            padding: 0;
        }
        
        .tab-bar .tab-item.active {
            color: #4a6fee;
        }
        
        .tab-bar .tab-item i {
            font-size: 20px;
            margin-bottom: 2px;
            transition: all 0.3s ease;
        }
        
        .tab-bar .tab-item span {
            font-size: 10px;
            line-height: 1;
            transition: all 0.3s ease;
        }
        
        .tab-bar .tab-item.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 16px;
            height: 2px;
            border-radius: 1px;
            background-color: #4a6fee;
        }
        
        /* 浮动客服按钮 */
        .floating-contact {
            position: fixed;
            right: 20px;
            bottom: 80px;
            width: 50px;
            height: 50px;
            background-color: var(--contact-primary-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            box-shadow: 0 4px 12px rgba(74, 111, 238, 0.4);
            cursor: pointer;
            z-index: 99;
            transition: all 0.3s ease;
        }
        
        .floating-contact:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 16px rgba(74, 111, 238, 0.5);
        }
        
        .floating-contact i {
            font-size: 24px;
        }
        
        /* 针对iPhoneX等全面屏设备的安全区适配 */
        @supports (padding-bottom: constant(safe-area-inset-bottom)) {
            .tab-bar {
                padding-bottom: constant(safe-area-inset-bottom);
            }
            .contact-content {
                padding-bottom: calc(50px + constant(safe-area-inset-bottom));
            }
        }
        
        @supports (padding-bottom: env(safe-area-inset-bottom)) {
            .tab-bar {
                padding-bottom: env(safe-area-inset-bottom);
            }
            .contact-content {
                padding-bottom: calc(50px + env(safe-area-inset-bottom));
            }
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 头部导航 -->
        <header class="contact-header">
            <button class="back-btn" onclick="history.back()">
                <i class="bi bi-chevron-left"></i>
            </button>
            <h1 class="contact-title">联系客服</h1>
        </header>

        <!-- 主内容区 -->
        <main class="contact-content">
            <div class="contact-card">
                <p class="contact-intro">您可以通过以下方式联系我们的客服团队，我们将尽快为您解答问题。工作时间：周一至周五 9:00-18:00。</p>
                
                <div class="contact-methods">
                    <!-- 电话联系方式 -->
                    <div class="contact-method">
                        <div class="contact-icon-wrapper">
                            <i class="bi bi-telephone-fill contact-icon"></i>
                        </div>
                        <div class="contact-details">
                            <h3 class="contact-name">客服热线</h3>
                            <p class="contact-value highlight">400-123-4567</p>
                        </div>
                        <button class="contact-action" onclick="window.location.href='tel:4001234567'">
                            拨打
                        </button>
                    </div>
                    
                    <!-- 邮箱联系方式 -->
                    <div class="contact-method">
                        <div class="contact-icon-wrapper">
                            <i class="bi bi-envelope-fill contact-icon"></i>
                        </div>
                        <div class="contact-details">
                            <h3 class="contact-name">客服邮箱</h3>
                            <p class="contact-value">service@example.com</p>
                        </div>
                        <button class="contact-action" onclick="window.location.href='mailto:service@example.com'">
                            发送
                        </button>
                    </div>
                    
                    <!-- 即时通讯联系方式 -->
                    <div class="contact-method">
                        <div class="contact-icon-wrapper">
                            <i class="bi bi-chat-dots-fill contact-icon"></i>
                        </div>
                        <div class="contact-details">
                            <h3 class="contact-name">在线客服</h3>
                            <p class="contact-value">通常在几分钟内回复</p>
                        </div>
                        <button class="contact-action" id="startChatBtn">
                            咨询
                        </button>
                    </div>
                </div>
                
                <!-- 二维码部分 -->
                <div class="qr-section">
                    <h3 class="qr-title">微信扫码联系客服</h3>
                    <div class="qr-image">
                        <!-- 实际项目中替换为真实的二维码图片 -->
                        <img src="../img/qr-code.jpg" alt="客服微信二维码" width="140" height="140">
                    </div>
                    <p class="qr-tip">扫描上方二维码，添加微信客服</p>
                </div>
            </div>
            
            <!-- 常见问题部分 -->
            <div class="contact-card faq-section">
                <h2 class="faq-title">常见问题</h2>
                
                <div class="faq-item">
                    <div class="faq-question">
                        <h3>如何更新我的简历信息？</h3>
                        <i class="bi bi-chevron-down faq-toggle"></i>
                    </div>
                    <div class="faq-answer">
                        <p>您可以在"我的 > 简历中心"页面，点击对应的简历进行编辑和更新。系统会自动保存您的修改，并在您下次投递时使用最新版本。</p>
                    </div>
                </div>
                
                <div class="faq-item">
                    <div class="faq-question">
                        <h3>如何联系我的职业经纪人？</h3>
                        <i class="bi bi-chevron-down faq-toggle"></i>
                    </div>
                    <div class="faq-answer">
                        <p>在"我的 > 我的经纪人"页面，您可以看到已匹配的职业经纪人。点击"咨询"按钮即可开始对话，或者通过预约功能安排一次详细的职业咨询。</p>
                    </div>
                </div>
                
                <div class="faq-item">
                    <div class="faq-question">
                        <h3>投递简历后多久会收到回复？</h3>
                        <i class="bi bi-chevron-down faq-toggle"></i>
                    </div>
                    <div class="faq-answer">
                        <p>简历投递后，企业通常会在1-7个工作日内查看并给予反馈。您可以在"我的 > 简历投递"中查看投递状态，如有特殊情况，也可以联系您的职业经纪人进行跟进。</p>
                    </div>
                </div>
                
                <div class="faq-item">
                    <div class="faq-question">
                        <h3>如何修改我的求职意向？</h3>
                        <i class="bi bi-chevron-down faq-toggle"></i>
                    </div>
                    <div class="faq-answer">
                        <p>您可以在"我的 > 求职意向"页面进行修改，包括期望职位、城市、薪资等信息。修改后，系统会根据您的新意向为您推荐更加匹配的职位。</p>
                    </div>
                </div>
                
                <div class="faq-item">
                    <div class="faq-question">
                        <h3>忘记密码如何找回？</h3>
                        <i class="bi bi-chevron-down faq-toggle"></i>
                    </div>
                    <div class="faq-answer">
                        <p>在登录页面点击"忘记密码"，通过绑定的手机号或邮箱验证身份后，可以重新设置密码。如果无法通过自助方式找回，请联系客服获取帮助。</p>
                    </div>
                </div>
            </div>
        </main>

        <!-- 底部导航栏 -->
        <footer class="tab-bar">
            <a href="../index.html" class="tab-item">
                <i class="bi bi-house-door"></i>
                <span>首页</span>
            </a>
            <a href="discover.html" class="tab-item">
                <i class="bi bi-compass"></i>
                <span>发现</span>
            </a>
            <a href="agents.html" class="tab-item">
                <i class="bi bi-person-rolodex"></i>
                <span>经纪人</span>
            </a>
            <a href="profile.html" class="tab-item active">
                <i class="bi bi-person-fill"></i>
                <span>我的</span>
            </a>
        </footer>
        
        <!-- 浮动客服按钮 -->
        <div class="floating-contact" id="floatingContact">
            <i class="bi bi-headset"></i>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // FAQ 折叠效果
            const faqItems = document.querySelectorAll('.faq-item');
            
            faqItems.forEach(item => {
                const question = item.querySelector('.faq-question');
                
                question.addEventListener('click', function() {
                    // 关闭其他打开的FAQ
                    faqItems.forEach(otherItem => {
                        if (otherItem !== item && otherItem.classList.contains('active')) {
                            otherItem.classList.remove('active');
                        }
                    });
                    
                    // 切换当前FAQ的状态
                    item.classList.toggle('active');
                });
            });
            
            // 浮动按钮效果
            const floatingContact = document.getElementById('floatingContact');
            const startChatBtn = document.getElementById('startChatBtn');
            
            function startChat() {
                // 实际项目中可以跳转到聊天页面或打开聊天窗口
                alert('正在连接客服，请稍候...');
                // window.location.href = 'chat.html?type=customer_service';
            }
            
            floatingContact.addEventListener('click', startChat);
            startChatBtn.addEventListener('click', startChat);
            
            // 滚动效果
            let lastScrollTop = 0;
            window.addEventListener('scroll', function() {
                const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
                
                // 向下滚动超过100px，隐藏浮动按钮
                if (currentScroll > lastScrollTop && currentScroll > 100) {
                    floatingContact.style.transform = 'translateY(80px)';
                } else {
                    floatingContact.style.transform = 'translateY(0)';
                }
                
                lastScrollTop = currentScroll <= 0 ? 0 : currentScroll;
            }, { passive: true });
        });
    </script>
</body>
</html> 